import { Component } from 'react';
import './Tick.less';

export default class Tick extends Component {

  constructor(props) {
    super(props);
    this.state = {
      date: []
    }
  }

  componentDidMount() {
    this.tick();
    this.timerID = setInterval(
      () => this.tick(), 1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    let date = new Date();
    let month = date.getMonth() + 1;
    let date1 = date.getFullYear() + '-' + (month < 10 ? '0' + month : month) + '-' + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
    let h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
    let m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
    let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
    let date3 = h + ':' + m + ':' + s;
    this.setState({ date: [date1, date3] });
  }

  render() {
    let { date } = this.state;
    return (
      <div className="mod-tick">
        <span>{date[0]}</span>
        <span>{date[1]}</span>
      </div>
    );
  }
}
